<template>
  <template v-if="!connected">
    等下，在开始连接之前，请确定你的ID
    <el-input v-model="name" style="width: 120px"></el-input>
    房间
    <el-input v-model="room" style="width: 120px"></el-input>
    无误，还有，你想用上次的配置
    <el-button @click="linkLikeLast()">链接</el-button>
    吗？
  </template>
  <template v-else>
    {{ name }},您已经作为{{ this.$store.state.role }}连接到了房间{{ room }}
    <el-button @click="disconnect()">断开连接</el-button>
  </template>
  <el-collapse :model-value="['ws']">
    <el-collapse-item name="ws" title="服务端连接">
      <el-row>
        <el-col :span="12">
          <el-card>
            <template #header>
              作为主机端
            </template>
            这个方法的优势是只有主机端需要额外的操作，客机端只需输入地址便可连接<br>
            1.你需要先架设你的服务器<br>
            2.在那之后，你需要让你的服务器有一个可访问的地址，依靠内网穿透（例如
            <el-link target="_blank" href="https://www.natfrp.com/">樱花frp</el-link>
            ）等或者你直接有一个公网IP<br>
            3.将你的地址发送给参与人（注意保密，任何人都可以通过这个地址连接到你的服务器）<br>
            <el-input v-model="hostWsKp">
              <template #append>
                <el-button @click="connectWs(this.hostWsKp,'KP')">
                  连接
                </el-button>
              </template>
            </el-input>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              作为客机端
            </template>
            输入主机端的地址
            <el-input v-model="hostWsPl">
              <template #append>
                <el-button @click="connectWs(this.hostWsPl,'PL')">
                  连接
                </el-button>
              </template>
            </el-input>
          </el-card>
        </el-col>
      </el-row>
    </el-collapse-item>
  </el-collapse>

</template>

<script>



import {store} from "@/js/store";
import {onClose, onMessage, onOpen} from "@/js/connect";

export default {
  name: "ConnectView",
  data() {
    return {
      hostWsPl: '',
      hostWsKp: '',
      name: '',
      room: '',
      connected: false
    }
  },
  methods: {
    test() {

    },
    linkLikeLast() {
      let linkJSON=window.localStorage.getItem('lastLinkConfig')
      if (linkJSON==null)return
      let link = JSON.parse(linkJSON)
      this.connectWs(link.host, link.role)
    }
    , disconnect() {
      this.connected = false
      store.commit('outLink')

    },
    connectWs(host, role) {
      let ws = new WebSocket('ws://' + host + '/ws/' + this.room + '/' + this.name + '/' + role)
      ws.onopen = (e) => {
        this.connected = true
        window.localStorage.setItem('lastLinkConfig', JSON.stringify({host: host, role: role}))
        store.commit('getLink', {link:ws,name:this.name})
        store.commit('switchRole',role)
        onOpen(e)
      }
      ws.onmessage = (e) => {
        onMessage(e)
      }
      ws.onclose=(e)=>{
        this.connected=false
        onClose(e)
      }
      window.onbeforeunload = function(){
        store.commit('outLink')
      }
    }
  }, watch: {
    name(value) {
      window.localStorage.setItem('userName', value)
    },
    room(value) {
      window.localStorage.setItem('userRoom', value)
    }
  },
  mounted() {
    this.name = window.localStorage.getItem('userName') ?? ''
    this.room = window.localStorage.getItem('userRoom') ?? ''
    this.connected=store.state.link!=null
  }
}
</script>

<style scoped>
</style>
